"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useLanguage } from "@/context/language-context"

export function ContactForm() {
  const { dictionary } = useLanguage()
  const [formData, setFormData] = useState({ name: "", email: "", message: "" })
  const [loading, setLoading] = useState(false)
  const [status, setStatus] = useState<string | null>(null)

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({ ...formData, [e.target.id]: e.target.value })
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setStatus(null) // Clear previous status

    try {
      // Simulate API call or form submission
      await new Promise((resolve) => setTimeout(resolve, 1000)) // Simulate network delay
      console.log("Form submitted:", formData)
      setStatus("Message sent successfully!")
      setFormData({ name: "", email: "", message: "" }) // Clear form
    } catch (error) {
      console.error("Form submission error:", error)
      setStatus("Failed to send message. Please try again.")
    } finally {
      setLoading(false)
      setTimeout(() => setStatus(null), 3000) // Clear status after 3 seconds
    }
  }

  return (
    <section className="py-12 md:py-20 bg-white dark:bg-gray-800">
      <div className="container mx-auto px-4 md:px-6">
        <Card className="max-w-2xl mx-auto shadow-lg">
          <CardHeader>
            <CardTitle className="text-2xl md:text-3xl text-center text-gray-900 dark:text-gray-50">
              {dictionary.contactFormTitle}
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  {dictionary.nameLabel}
                </label>
                <Input
                  id="name"
                  type="text"
                  value={formData.name}
                  onChange={handleChange}
                  required
                  className="w-full p-3 border rounded-md focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-50"
                />
              </div>
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  {dictionary.emailLabel}
                </label>
                <Input
                  id="email"
                  type="email"
                  value={formData.email}
                  onChange={handleChange}
                  required
                  className="w-full p-3 border rounded-md focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-50"
                />
              </div>
              <div>
                <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  {dictionary.messageLabel}
                </label>
                <Textarea
                  id="message"
                  value={formData.message}
                  onChange={handleChange}
                  rows={5}
                  required
                  className="w-full p-3 border rounded-md focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-50"
                />
              </div>
              <Button
                type="submit"
                disabled={loading}
                className="w-full bg-black text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
              >
                {loading ? "Sending..." : dictionary.sendButton}
              </Button>
              {status && (
                <p
                  className={`text-center text-sm mt-4 ${status.includes("successfully") ? "text-green-600 dark:text-green-400" : "text-red-500 dark:text-red-400"}`}
                >
                  {status}
                </p>
              )}
            </form>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}
